<template>
  <div
    :style="{
      '--theme-color': settings.themeColor,
      '--active-color': settings.activeColor,
      '--scroll-width': '30px',
    }"
  >
    <div class="home-header">
      <ly-header />
    </div>
    <div class="wrap-item">
      <!-- 搜索-->
      <el-form ref="formSearch" :model="formSearch" size="small" inline>
        <el-form-item>
          <el-input
            v-model.trim="formSearch.param.title"
            placeholder="请输入标题"
            maxlength="30"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.param.date"
            @change="dateChange"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <span class="wrap-btn wrap-primary" @click="search">查询</span>
          <span class="wrap-btn wrap-go-back" @click="go">返回</span>
        </el-form-item>
      </el-form>
      <!-- 数据列表 -->
      <div class="wrap-other-roll">
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#F6F7F9' }"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="userName" label="发布人"> </el-table-column>
          <el-table-column
            prop="addTime"
            label="发布时间"
            width="160px"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="操作"
            width="80px"
            align="center"
          >
            <template slot-scope="scope">
              <el-dropdown @command="(command) => handle(command, scope.row)">
                <span class="el-dropdown-link">
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="view">查看</el-dropdown-item>
                  <el-dropdown-item command="approve" v-if="scope.row.type == 2"
                    >审批</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <web-page
        :page="formSearch.pageNum"
        :size="formSearch.pageSize"
        :total="total"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      ></web-page>
    </div>
  </div>
</template>

<script>
import config from '@/config'
import lyHeader from './../../layout/header/index.vue'
import Base64 from 'base-64'
export default {
  components: {
    lyHeader,
  },
  data() {
    return {
      settings: config.settings,
      userInfo: {
        userName: this.$crypto.decrypt(
          Base64.decode(JSON.parse(sessionStorage.userInfo).userName)
        ),
        workPost: JSON.parse(sessionStorage.userInfo).workPost,
        lastLoginTime: JSON.parse(sessionStorage.userInfo).lastLoginTime,
      },
      formSearch: {
        pageNum: 1,
        pageSize: 10,
        param: {},
      },
      total: null,
      tableData: [],
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    go() {
      //返回
      this.$router.push('/home/index')
    },
    itemList() {
      // 获取列表
      this.$axios
        .post('/admin/messsage/myMessagePage', this.formSearch)
        .then((data) => {
          this.tableData = []
          if (data.code == 200) {
            this.tableData = data.data.list
            this.total = data.data.total
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    sizeChange(val) {
      //每页条数
      this.formSearch.pageSize = val
      this.itemList()
    },
    currentChange(val) {
      //分页
      this.formSearch.pageNum = val
      this.itemList()
    },
    search() {
      //搜索
      this.formSearch.pageNum = 1
      this.itemList()
    },
    dateChange(val) {
      // 时间范围发生变化
      if (val) {
        this.formSearch.param.start = val[0]
        this.formSearch.param.stop = val[1]
      } else {
        this.formSearch.param.start = ''
        this.formSearch.param.stop = ''
      }
    },
    handle(command, row) {
      //操作
      if (!command) {
        this.$message.error('菜单选项缺少command属性')
        return
      }
      switch (command) {
        case 'view':
          //查看
          if (row.type == 2) {
            this.$router.push({
              path: '/home/backlog/detail',
              query: { id: row.id, runTaskId: row.runTaskId },
            })
          } else {
            this.$router.push({
              path: '/home/backlog/notice',
              query: { id: row.id },
            })
          }
          break
        case 'approve':
          //审批
          this.$router.push({
            path: '/home/backlog/detail',
            query: { id: row.id, linkId: row.linkId, runTaskId: row.runTaskId },
          })
          break
      }
    },
  },
}
</script>
<style scoped>
.home-header {
  padding-bottom: 20px;
}
</style>
